// <div id="logoarea" instancename="logo" top="10" left="200" style="display:none"></div>
//var logo = null;
//logo = new ManipulatorLogo("logoarea");


var ManipulatorLogo = function(pareaid)
{
	this.rootid = pareaid;
	this.canvid = (new Date()).getTime().toString() + "manipulatorlogo";

	this.rootnode = document.getElementById(this.rootid);
	this.instancename = this.rootnode.getAttribute("instancename");
	this.top = this.rootnode.getAttribute("top") + "px";
	this.left = this.rootnode.getAttribute("left") + "px";
	if(this.top == "px")
	{
		this.top = "100px";
	}
	if(this.left == "px")
	{
		this.left = "100px";
	}
	this.minwidth = 5;
	this.maxwidth = 30;
	this.stepwidth = 5;
	this.sign = "plus";

	this.currentwidth = this.minwidth;
	this.currentheight = 20;
	this.springlength = 5;

	this.loopmax = 300;
	this.currentloop = 0;

	this.moving = false;

	this.displaybackground = function()
	{
		//var myroot = document.getElementById(this.rootid);
		var myroot = this.rootnode;
		myroot.innerHTML = "";
		var mya = myroot.appendChild(document.createElement("canvas"));
		mya.style.position = "absolute";
		mya.style.top = 0;
		mya.style.left = 0;
		mya.width = window.innerWidth;
		mya.height = window.innerHeight;

		mya.style.zIndex = 100;
		mya.style.background = "rgba(0,0,0,0.7)";
	}

	this.togglemoving = function()
	{
		this.moving = !this.moving;
		if(this.moving)
		{
			this.currentloop = 0;
		}
		this.displaylogo();
	}

	this.displaylogo = function()
	{
		var canv = document.getElementById(this.canvid);
		if(!canv)
		{
			var canv = document.body.appendChild(document.createElement("canvas"));
			canv.setAttribute("id", this.canvid);
			canv.style.position = "absolute";
			canv.style.top = this.top;
			canv.style.left = this.left;
			canv.style.zIndex = 99;

			canv.width = this.currentwidth * this.springlength + 150;
			canv.height = this.currentheight;

			canv.setAttribute("onclick", this.instancename + ".togglemoving();");
		}
		canv.width = this.currentwidth * this.springlength + 150;
		var myw = this.currentwidth;
		var myh = this.currentheight;

		var myl = this.springlength;

		var cx = canv.getContext("2d");
		cx.beginPath();
		cx.fillStyle = "red";
		//cx.fillRect(0,0,canv.width, canv.height);
		cx.fillStyle = "skyblue";
		cx.strokeStyle = "skyblue";
		cx.moveTo(0, 0);
		for(var icnt = 0; icnt < myl; icnt++)
		{
			cx.lineTo(myw * icnt, icnt % 2 * myh);
		}

		cx.moveTo(0, myh);
		for(var icnt = 0; icnt < myl; icnt++)
		{
			cx.lineTo(myw * icnt, (1 - icnt % 2) * myh);
		}

		cx.lineTo(myw * (myl - 1), 0);

		cx.stroke();

		cx.font = "20px 'Impact'";
		cx.textAlign = "start";
		cx.textBaseline = "middle";
		cx.fillText("Manipulator", myw * myl, Math.floor(myh / 2));
		cx.fillStyle = "cornflowerblue";
		cx.fillText("M", myw * myl, Math.floor(myh / 2));

		cx.closePath();

		if(this.moving)
		{
			if(this.currentloop >= this.loopmax)
			{
				this.moving = !this.moving;
				this.currentloop = 0;
			}
			var myinterval = 130;
			if(this.sign == "plus")
			{
				myinterval = 80;
			}
			setTimeout(this.instancename + ".displaynext();", myinterval);
			this.currentloop++;
		}
	}

	this.displaynext = function()
	{
		if(this.sign == "plus")
		{
			this.currentwidth = this.currentwidth + this.stepwidth;
			this.currentheight = this.currentheight - 1;
			if(this.currentwidth >= this.maxwidth)
			{
				this.sign = "minus";
			}
		}
		else
		{
			this.currentwidth = this.currentwidth - this.stepwidth;
			this.currentheight = this.currentheight + 1;
			if(this.currentwidth <= this.minwidth)
			{
				this.sign = "plus";
			}
		}
		this.displaylogo();
	}
	this.displaylogo();
}
